<template>
	<div class="cont">
		<header>
			<img src="@/assets/homeLeftImg/arrow1.png" alt="" />
			<span>{{ title }}</span>
			<img src="@/assets/homeLeftImg/arrow2.png" alt="" />
		</header>
		<div class="main">
			<div class="left">
				<ul>
					<li v-for="(item, ind) in num_" :key="ind">
						<span class="sp3">
							{{ item }}
						</span>
						<span class="sp1"></span>
						<span class="sp2"></span>
					</li>
				</ul>
			</div>
			<div class="right">万kWh</div>
		</div>
	</div>
</template>
<script setup>
const props = defineProps({
	title: {
		type: String,
		default: "0000000"
	},
	num: {
		type: String,
		default: ""
	}
});

const num_ = ref("");
watch(
	() => props.num,
	val => {
		let p = "";
		for (let i = 0; i < 8 - (val + "").length; i++) {
			p += "0";
		}
		num_.value = p + val;
		// console.log("num", num_);
	},
	{
		deep: true,
		immediate: true
	}
);
</script>
<style lang="scss" scoped>
.cont {
	width: 100%;
	height: 84px;
	background: linear-gradient(88deg, rgba(167, 231, 255, 0.09) 0%, rgba(167, 231, 255, 0) 100%);
	border-radius: 0px 0px 0px 0px;
	display: flex;
	flex-direction: column;
	header {
		font-weight: bold;
		font-size: 16px;
		color: #ffffff;
		text-align: center;
		display: flex;
		height: 30px;
		line-height: 30px;
		align-items: center;
		justify-content: center;
		img {
			width: 12px;
			height: 12px;
		}
		span {
			margin: 0 12px;
		}
	}
	.main {
		flex: 1;
		display: flex;
		align-items: center;
		margin-bottom: 12px;
		.left {
			flex: 1;
			height: 100%;
			ul {
				display: flex;
				height: 100%;
				li {
					flex: 1;
					position: relative;
					height: 100%;
					margin: 0 2px;
					.sp1,
					.sp2 {
						display: inline-block;
						position: absolute;
						width: 100%;
						height: 50%;
					}
					.sp1 {
						top: 0;
						background: url(@/assets/homeLeftImg/numT.png) center center;
						background-size: 100% 100%;
					}
					.sp2 {
						bottom: 0;
						background: url(@/assets/homeLeftImg/numB.png) center center;
						background-size: 100% 100%;
					}
					.sp3 {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						font-weight: bold;
						font-size: 30px;
						color: #ffffff;
						text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
						z-index: 2;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				li:nth-child(3) {
					margin-right: 10px;
				}
				li:nth-child(6) {
					margin-right: 10px;
				}
				li:nth-child(3)::after,
				li:nth-child(6)::after {
					content: ",";
					font-weight: bold;
					font-size: 30px;
					color: #ffffff;
					text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
					position: absolute;
					right: -10px;
					bottom: -2px;
					z-index: 12;
				}
				li:nth-child(6)::after {
					content: ".";
				}
			}
		}

		.right {
			font-weight: 500;
			font-size: 14px;
			color: #ffffff;
			margin: 0 16px 0 5px;
		}
	}
}
</style>
